<!DOCTYPE html>
<html>
<head>
    <title>MOCK page</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/jquery.min.js"></script>
    <script type="text/javascript" src="/static/clipboard.min.js"></script>
    <script type="text/javascript" src="/static/layer.js"></script>
    <script src="/static/bootstrap.min.js"></script>
    <script src="/static/jquery-ui.min.js"></script>
    <script src="/static/jquery.ui.touch-punch.min.js"></script>
    <script src="/static/jquery.htmlClean.js"></script>
    <script src="/static/scripts.min.js"></script>
    <script type="text/javascript">

        var pageX = 0;
        var pageY = 0;
        var project = location.href.split("/")[4];
        document.onclick=function(event){
             pageX = event.pageX;
             pageY = event.pageY;
             if(pageX==undefined)
            {
                  pageX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
            }
             if(pageY==undefined)
             {
                 pageY = event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
             }
        };
        function showData(data, method) {
            showLayer(data, method)
        };

        function showLayer(url, method) {
            layer.open({
                type: 2,
                title: 'layer弹层组件:jsonFarmat',
                fix: true,
                offset: '100px',
                shadeClose: true,
                maxmin: true,
                area: ['1000px', '600px'],
                content: '/html/JSON-handle.html?url='+url+'&method='+method+'&project='+project,
                success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                },
                end: function(){
                }
            });
            $("iframe").css("height","600px");
        }

        function getMockList(method) {
               $.get("/api/mock?httpRequestMethod="+method +"&project=" + project,function(data,status){
                  if (status == "success") {
                    $(".table").html("");
                    $(".table").append("<tr><th>api</th><th/><th>key</th></tr>");
                    for( var i = 0; i < data.length; i++){
                        var returnData = data[i].data;
                        $(".table").append("<tr><td><a href=javascript:showData('"+data[i].api+"','"+method+"') target='_blank'>"+data[i].api+"</a></td><td/><td>"+data[i].key+"</td></tr>");
                    }
                    $("#method").text(method);
                  }
              });
           };
        function addMockApi() {
            try {
                JSON.parse($("#data").val());
                $.ajax({
                   url: '/api/mock',
                   dataType: 'json',
                   data:{
                        key:$("#key").val(),
                        apiValue:$("#api").val(),
                        httpRequestMethod:$("#httpRequestMethod").text(),
                        dataValue:$("#data").val(),
                        content:$("#content").val()
                   },
                   type: 'POST',
                   beforeSend: function (xhr) {
                       xhr.setRequestHeader("project", project);
                   },
                   async: false,
                   cache: true,
                   success: function (response) {
                      alert("添加成功");
                      getMockList($("#httpRequestMethod").text());
                   }
                });
            }catch(parseException){
                alert("json 格式错误");
            }
          };

          function changeMethodButtonValue(method) {
             $("#httpRequestMethod").text(method);
          };


        $(function(){

            var clipboard = new Clipboard('#btnData');
            clipboard.on('success', function(e) {
                $("#copyDataInfo").text("copied");
                e.clearSelection();
            });

            var clipboard = new Clipboard('#btnContent');
            clipboard.on('success', function(e) {
                $("#copyContentInfo").text("copied");
                e.clearSelection();
            });

          $("#submit").click(function(){
            addMockApi();
          });

          getMockList("GET");
        });

    </script>
    <style>
        div br{ display:none; }
        #header {
        background-color:black;
        color:white;
        text-align:center;
        padding:5px;
        }
        #nav {
        line-height:30px;
        background-color:#eeeeee;
        width:100px;
        float:left;
        padding:5px;
        }
        #section {
        float:left;
        padding:10px;
        }
        #footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h1>
                mock测试数据－－－－请注意:api最多5层
            </h1>
        </div>
    </div>
</div>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="tabbable" id="tabs-532854">
                <ul class="nav nav-tabs active">
                    <li class="tab-content active">
                        <a href="#panel-180332" data-toggle="tab">查询api</a>
                    </li>
                    <li class="tab-content">
                        <a href="#panel-97025" data-toggle="tab">添加api</a>
                    </li>
                    <li class="tab-content">
                        <a href="#panel-970250" data-toggle="tab">消息<span id="notice-count" class="badge">0</span></a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-180332">

                        <div class="container" style="margin-top: 30px;">
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <div class="btn-group">
                                        <button class="btn btn-default" onclick="location.href='/api/init'">返回</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-default" id="method">GET</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="javascript:getMockList('GET')">GET</a>
                                            </li>
                                            <li>
                                                <a href="javascript:getMockList('POST')">POST</a>
                                            </li>
                                            <li>
                                                <a href="javascript:getMockList('PUT')">PUT</a>
                                            </li>
                                            <li>
                                                <a href="javascript:getMockList('DELETE')">DELETE</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <table class="table"  style="margin-top: 20px;">
                                        <thead>
                                        <tr>
                                            <th>
                                                编号
                                            </th>
                                            <th>
                                                产品
                                            </th>
                                            <th>
                                                交付时间
                                            </th>
                                            <th>
                                                状态
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="info">
                                            <td>
                                                4
                                            </td>
                                            <td>
                                                TB - Monthly
                                            </td>
                                            <td>
                                                04/04/2012
                                            </td>
                                            <td>
                                                Call in to confirm
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="tab-pane" id="panel-97025">
                        <div class="container"  style="margin-top: 30px;">
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <button type="button" class="btn btn-default" id="submit">提交</button>
                                    <form role="form" style="margin-top: 30px;">
                                        <div class="btn-group">
                                            <button class="btn btn-default" id="httpRequestMethod">GET</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:changeMethodButtonValue('GET')">GET</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:changeMethodButtonValue('POST')">POST</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:changeMethodButtonValue('PUT')">PUT</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:changeMethodButtonValue('DELETE')">DELETE</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="form-group" style="margin-top: 10px;">
                                            <label for="key">key</label>
                                            <input type="text" class="form-control" id="key" />
                                        </div>
                                        <div class="form-group">
                                            <label for="api">api</label>
                                            <input type="text" class="form-control" id="api" />
                                        </div>
                                        <div class="form-group">
                                            <label for="data">data</label>
                                            <textarea id="data" class="form-control"  style="height:300px"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label for="content">content</label>
                                            <textarea id="content" class="form-control" style="height:300px"></textarea>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="panel-970250">
                        <div class="container" style="margin-top: 30px;">
                            <div class="row clearfix">
                                <!--<div class="col-md-12 column">
                                    <blockquote>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                                        </p> <small>Someone famous <cite>Source Title</cite></small>
                                    </blockquote>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://139.196.171.215:8088/notice/message");
    }
    else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("websocket open error")
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        console.log("websocket open success")
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        var json = eval("("+event.data+")");
        console.log(json);
        $("#notice-count").text(parseInt($("#notice-count").text()) + 1)
        showMessageInNotice(json)
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("websocket close success")
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

    //将消息显示在网页上
    function showMessageInNotice(json) {
        var str = "<div class=\"col-md-12 column\">\n" +
        "<blockquote>\n" +
        "<p>\n" +
        "API ["+json.api+"] 有发生变化\n" +
        "</p> <small>api : "+json.api+"</small>\n" +
        "</p> <small>project : "+json.project+"</small>\n" +
        "</p> <small>key : "+json.key+"</small>\n" +
        "</p> <small>method : "+json.method+"</small>\n" +
        "</blockquote>\n" +
        "</div>"
        $("#panel-970250").find(".row").append(str);
        getMockList($("#httpRequestMethod").text());
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        websocket.send("?");
    }
</script>
</html>

